<template>
  <view class="container">
    <view class="page-top "></view>

    <van-index-bar >
      <view v-for="(item,index) in items" :key="index">
        <van-index-anchor :index="item.text"/>
        <van-cell v-for="(city,cindex) in item.children" :key="cindex" :title="city.text"/>
      </view>

    </van-index-bar>

  </view>
</template>

<script>
// 例如：import uploadFile from '@/components/uploadFile/uploadFile'

import {getOpenRegion} from "../../../requests/merchant";

let $this
export default {

  data() {
    // 这里存放数据
    return {
      items: [],
      indexList:[],
    }
  },
  // 方法集合
  methods: {

    /**
     * 初始化页面数据
     */
    initPage() {
      getOpenRegion().then(res => {
        let datas = res.data;
        for (let i = 0; i < datas.length; i++) {
          datas[i]['children'] = datas[i]['serviceChildrenList']
          $this.indexList.push(datas[i]['first_letter']);
        }
        $this.items = datas;
      })
    },
    onClickNav(e) {
      console.log(e)
      $this.mainActiveIndex = e.mp.detail.index || 0
    },

    onClickItem(e) {
      console.log(e)
      $this.activeId = $this.activeId === e.mp.detail.id ? null : e.mp.detail.id;

    },

  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    $this = this

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  onShow() {
    $this.initPage()


  }
}
</script>

<style>

@import "index.css";
</style>
